<template>
    <div>
        <el-dialog :title="myDialog.title" :visible.sync="myDialog.flag">
            <el-form :model="addDialog" :rules="rolesRules" ref="addref">
                <el-form-item label="分类名称" :label-width="formLabelWidth" prop="cat_name">
                    <el-input v-model="addDialog.cat_name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" :label-width="formLabelWidth" v-show="!myDialog.isshow">
                    
                    <el-cascader v-model="value" :options="options" :props=props ></el-cascader>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="myDialog.flag = false">取 消</el-button>
                <el-button type="primary" @click="que()">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { addCate ,editCate} from "@/utils/axios/categoriesApi"
export default {
    props: {
        myDialog: Object,
        addDialog: Object,
        options:Array
    },

    data () {
        return {
            formLabelWidth: "120px",
            rolesRules: {
                cat_name: [
                    { required: true, message: '请输入分类名称', trigger: 'blur' },
                    { min: 3, max: 20, message: '分类名称长度不符合3-20位', trigger: 'blur' }
                ],
            },
            value:[],
            props:{
                label:"cat_name",
                value:"cat_id"
            }
        };
    },

    mounted () { 

    },

    methods: {
         que () {
            this.$refs.addref.validate(async(flag)=>{
                 if (this.myDialog.type == "add") {
                 this.addDialog.cat_pid=this.value[this.value.length-1]
                 this.addDialog.cat_level=this.value.length
                const { data } = await addCate(this.addDialog)
                // console.log(data);
                if (data.meta.status == 201) {
                    this.myDialog.flag = false
                    this.$message.success(data.meta.msg)
                    this.$emit("suibian")
                } else {
                    this.$message.error(data.meta.msg)
                }
            } else if (this.myDialog.type == "edit") {
                const { data } = await editCate(this.addDialog.cat_pid, this.addDialog)
                // console.log(data);
                if (data.meta.status == 200) {
                    this.myDialog.flag = false
                    this.$message.success("修改成功")
                    this.$emit("suibian")
                } else {
                    this.$message.error(data.meta.msg)
                }
            }
            })
           
        }
    },
};
</script>

<style lang="scss" scoped>

</style>